<template>
  <div class="header">
<!--    <div class="slogan">-->
<!--      <p>老男孩IT教育 | 帮助有志向的年轻人通过努力学习获得体面的工作和生活</p>-->
<!--    </div>-->
    <div class="nav">
      <ul class="left-part">
        <li class="logo">
          <router-link to="/">
<!--            <img src="../assets/img/head-logo.svg" alt="">-->
          </router-link>
        </li>
        <li class="ele">
          <span @click="goPage('/free-course')" :class="{active: url_path === '/free-course'}">医院简介</span>
        </li>
        <li class="ele">
          <span @click="goPage('/actual-course')" :class="{active: url_path === '/actual-course'}">专家团队</span>
        </li>
        <li class="ele">
          <span @click="goPage('/light-course')" :class="{active: url_path === '/light-course'}">就医环境</span>
        </li>
      </ul>


      <div class="right-part">
<!--        <div v-if="username">-->
<!--&lt;!&ndash;          <span>{{ username }}</span>&ndash;&gt;-->
<!--&lt;!&ndash;          <span class="line">|</span>&ndash;&gt;-->
<!--&lt;!&ndash;          <span @click="handleLogout">注销</span>&ndash;&gt;-->
<!--&lt;!&ndash;          <span @click="logout">1111</span>&ndash;&gt;-->

<!--          &lt;!&ndash;          <span class="user-profile">&ndash;&gt;-->

<!--          <el-dropdown trigger="click">-->
<!--      <span class="el-dropdown-link">-->
<!--<div class="fl">-->
<!--        <img :src="userAvatar" class="avatar" alt="User Avatar"/>-->
<!--</div>-->
<!--        {{ username }}-->
<!--        <i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
<!--      </span>-->
<!--            <el-dropdown-menu slot="dropdown">-->
<!--              <el-dropdown-item @click="logout">-->
<!--                <span @click="logout">修改密码</span>-->
<!--              </el-dropdown-item>-->
<!--              <el-dropdown-item @click="handleLogout">-->
<!--                <span @click="handleLogout">-->
<!--                退出登录-->
<!--                  </span>-->
<!--              </el-dropdown-item>-->
<!--            </el-dropdown-menu>-->
<!--          </el-dropdown>-->
<!--          &lt;!&ndash;        </span>&ndash;&gt;-->


<!--        </div>-->

<!--        <div v-else-if="password">-->
<!--          <span @click="put_login">登录</span>-->
<!--          <span class="line">|</span>-->
<!--          <span @click="put_register">注册</span>-->
<!--          <span class="line">|</span>-->
<!--        </div>-->

<!--        <div v-else>-->
<!--          <span @click="put_login">登录</span>-->
<!--          <span class="line">|</span>-->
<!--          <span @click="put_register">注册</span>-->
<!--          <span class="line">|</span>-->



<!--        </div>-->


<!--        &lt;!&ndash;        只要点击事件触发，is_login为True&ndash;&gt;-->
<!--        <Login v-if="is_login" @close="close_login" @go="put_register"/>-->
<!--        <Register v-if="is_register" @close="close_register" @go="put_login"/>-->
<!--        <Password v-if="is_password" @close="close_password" @go="put_password"/>-->
<!--      </div>-->
<!--            <form class="search">-->
<!--        <div class="tips" v-if="is_search_tip">-->
<!--          <span @click="search_action('Python')">Python</span>-->
<!--          <span @click="search_action('Linux')">Linux</span>-->
<!--        </div>-->
<!--        <input type="text" :placeholder="search_placeholder" @focus="on_search" @blur="off_search"-->
<!--               v-model="search_word">-->
<!--        <el-button icon="el-icon-search" circle @click="search_action(search_word)"></el-button>-->
<!--      </form>-->
    </div>
  </div>
    </div>

</template>

<script>
// import Login from "@/components/Login";
// import Register from "@/components/Register";
// import Password from "@/components/Password";

export default {
  name: "Header",
  data() {
    return {
      url_path: sessionStorage.url_path || '/',
      is_login: false,
      is_register: false,
      is_password:false,
      username: '',
      userName: '',
      userAvatar: '',
      is_search_tip: true,
      search_placeholder: '',
      search_word: ''
    }
  },
  methods: {
    search_action(search_word) {
      if (!search_word) {
        this.$message('请输入要搜索的内容');
        return
      }
      if (search_word !== this.$route.query.word) {
        this.$router.push(`/course/search?word=${search_word}`);
      }
      this.search_word = '';
    },
    on_search() {
      this.search_placeholder = '请输入想搜索的课程';
      this.is_search_tip = false;
    },
    off_search() {
      this.search_placeholder = '';
      this.is_search_tip = true;
    },
    goPage(url_path) {
      // 已经是当前路由就没有必要重新跳转
      if (this.url_path !== url_path) {
        this.$router.push(url_path);
      }
      sessionStorage.url_path = url_path;
    },
    // 已分析
    put_login() {
      this.is_login = true;
      this.is_register = false;
      this.is_password = false;
    },
    // 已分析
    put_register() {
      this.is_login = false;
      this.is_register = true;
      this.is_password = false;
    },
    put_password(){
      this.is_login = false;
      this.is_register = false;
      this.is_password = true;
    },
//     这里还是通过is_login的boolen值来控制登录页面的显示与否，
// 事件的执行顺序主要是子传父，在登录组件中点击@click="close_login"事件，
// 然后再methods通过close_login() {
//       this.$emit('close')
//     },把事件传到Header的事件绑定@close中，然后触发methods中的close_login方法，
//
// 最后，事件触发is_login变成false，组件消失
    close_login() {
      this.is_login = false;
      // 子组件触发了它，需要取出username显示出来
      this.username = this.$cookies.get('username')

    },
    // 同上
    close_register() {
      this.is_register = false;
    },
    close_password() {
      this.is_password = false;
    },
    handleLogout() {
      // 前后端分离后，退出只需要清除浏览器中的登录记录即可，不需要再向后端发送请，除非后端想记录用户的退出操作，可以配合个接口
      console.log(1)
      this.$cookies.remove('username')
      this.$cookies.remove('token')
      this.$cookies.remove('icon')
      this.username = ''
    },
    logout() {
      this.is_login = false;
      this.is_register = false;
      this.is_password = true;
    },
  },
  mounted() {
    // 在这里获取用户登录成功后的用户名和头像信息
    this.userName = '月一盒'; // 替换为实际的用户名
    this.userAvatar = 'https://img1.baidu.com/it/u=3410523613,2628462258&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666'; // 替换为实际的头像地址
  },
  created() {
    sessionStorage.url_path = this.$route.path;  // '/'    ’/freeCourse‘
    this.url_path = this.$route.path;
    this.username = this.$cookies.get('username')
  },
  // components: {
  //   Login, Register,Password
  // }
}
</script>

<style scoped>
.header {
  background-color: white;
  box-shadow: 0 0 5px 0 #aaa;
}

.header:after {
  content: "";
  display: block;
  clear: both;
}

.slogan {
  background-color: #eee;
  height: 40px;
}

.slogan p {
  width: 1200px;
  margin: 0 auto;
  color: #aaa;
  font-size: 13px;
  line-height: 40px;
}

.nav {
  background-color: white;
  user-select: none;
  width: 1200px;
  margin: 0 auto;

}

.nav ul {
  padding: 15px 0;
  float: left;
}

.nav ul:after {
  clear: both;
  content: '';
  display: block;
}

.nav ul li {
  float: left;
}

.logo {
  margin-right: 20px;
}

.ele {
  margin: 0 20px;
}

.ele span {
  display: block;
  font: 15px/36px '微软雅黑';
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.ele span:hover {
  border-bottom-color: orange;
}

.ele span.active {
  color: orange;
  border-bottom-color: orange;
}

.right-part {
  float: right;
}

.right-part .line {
  margin: 0 10px;
}

.right-part span {
  line-height: 68px;
  cursor: pointer;
}

.user-profile {
  display: flex;
  align-items: center;
  cursor: pointer;
}


.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  /*margin-top: px;*/


}
.fl{
   display: inline-block;
  padding: 13px 13px;
  float: right;
  height: 50px;
    padding-bottom: 5px
}


.search {
  float: right;
  position: relative;
  margin-top: 22px;
  margin-right: 10px;
}

.search input, .search button {
  border: none;
  outline: none;
  background-color: white;
}

.search input {
  border-bottom: 1px solid #eeeeee;
}

.search input:focus {
  border-bottom-color: orange;
}

.search input:focus + button {
  color: orange;
}

.search .tips {
  position: absolute;
  left: 0;
}

.search .tips span {
  border-radius: 11px;
  background-color: #eee;
  line-height: 22px;
  display: inline-block;
  padding: 0 7px;
  margin-right: 3px;
  cursor: pointer;
  color: #aaa;
  font-size: 14px;

}

.search .tips span:hover {
  color: orange;
}
</style>
